<template>
  <div class="main">
    <div class="anime2Area">
      <div id="anime_ex2"></div>
      <div class="rotate">
        <img src="~assets/img/experiment/rotate.png" style="width: 40px" alt="">
        <span style="color:#fff">按住左键拖动改变视角</span>
      </div>
    </div>
  </div>
</template>

<script>
import {EventBus} from 'assets/js/experiment/ex2/eventBus'
import {AnimePlay} from 'utils/experiment/ex2/AnimePlay'
import {checkAndRun} from "utils/experiment/ex2/ex2";

export default {
  name: "ex2_right",
  data() {
    return {
      loading: true,
    }
  }, created() {
    this.loading = this.$loading({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
  },
  computed: {
    code: {
      get() {
        return this.$store.state.ex2.code
      },
      set(value) {
        this.$store.commit('changeEx2Code', value)
      }
    },
    tableData: {
      get() {
        return this.$store.state.ex2.tableData
      },
      set(value) {
        this.$store.commit('changeEx2TableData', value)
      }
    },
    time: {
      get() {
        return this.$store.state.ex2.time
      },
      set(value) {
        this.$store.commit('changeEx2Time', value)
      }
    },
    speed: {
      get() {
        return this.$store.state.ex2.speed
      },
      set(value) {
        this.$store.commit('changeEx2Speed', value)
      }
    },
    direction: {
      get() {
        return this.$store.state.ex2.direction
      },
      set(value) {
        this.$store.commit('changeEx2Direction', value)
      }
    },
    // 是否在飞行
    isFly: {
      get() {
        return this.$store.state.ex2.isFly
      },
      set(value) {
        this.$store.commit('changeEx2IsFly', value)
      }
    },
    // 代码是否正确
    codeTrue: {
      get() {
        return this.$store.state.ex2.codeTrue
      },
      set(value) {
        this.$store.commit('changeEx2CodeTrue', value)
      }
    },
  },
  mounted() {
    this.$nextTick(function () {
      AnimePlay(this)
    })
    EventBus.$on('run', val => {
      if (this.isFly) {
        this.$message({
          message: '正在运行中，请稍后再试',
          type: 'error',
          duration: 1000,
          offset: 50
        });
        return
      }
      checkAndRun(this)
    })
  }, destroyed() {
    EventBus.$off('run')
  }
}
</script>

<style scoped>
@import "../../../assets/css/experiment/ex2/ex2_right.css";
</style>
